<template>
  <div class="order" v-if="addressData">
    <my-header title="确认订单">
      <template #right>
        <slot name="right"> &nbsp; </slot>
      </template>
    </my-header>

    <!-- 地址 -->
    <div class="address" @click="gotoAddress" v-if="addressData">
      <van-cell
        title="单元格"
        center
        :label="addressData.name + ' ' + addressData.tel"
        is-link
      >
        <template #title>
          <div class="atitle">
            <span class="default">默认</span>
            <span>
              <i>{{ addressData.province }}</i
              ><i>{{ addressData.city }}</i></span
            >
            <p>{{ addressData.addressDetail }}</p>
          </div>
        </template>
      </van-cell>
    </div>

    <!-- 商品信息 -->
    <div class="goodInfo" v-for="(l, i) in checkedGoods" :key="i">
      <van-card
        :num="l.count"
        :price="l.price"
        :title="l.name"
        :thumb="l.img"
      />
    </div>

    <!-- cells -->
    <div class="cells">
      <van-cell title="优惠券" value="暂无可用" is-link />
      <van-cell title="配送" value="包邮" />
      <van-cell>
        <template #title>
          同意<span>《会员购服务协议》</span>
          <van-icon name="arrow" />
        </template>
        <van-switch
          v-model="checked"
          size="22"
          active-color="#ff80aa"
          inactive-color="#dcdee0"
        />
      </van-cell>
    </div>

    <!-- footer -->
    <div class="footer">
      <van-cell>
        <template #title>
          <span class="custom-title"
            >￥ <i>{{ getTotal }}</i></span
          >
          <div class="submit">
            <span @click="gotoPay"><i>提交订单</i></span>
          </div>
        </template>
      </van-cell>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checked: true,
      //   弹出层
      show: false,
      checkedGoods: [],
      // 总价
      total: 0,
      addressData: {},
    };
  },
  methods: {
    // 跳转地址管理
    gotoAddress() {
      this.$router.push({
        name: "address",
        query: { choosenId: this.$route.query.addressId },
      });
    },
    // 跳转支付页面
    gotoPay() {
      this.$router.push({ name: "pay", query: { total: this.total } });
    },
    async getCheckIdData() {
      let res = await this.$ajax.getCheckEveryData({ checkbox: true });
      // console.log(res);
      this.checkedGoods = res;
      console.log(this.checkedGoods);
    },
    async getAddress() {
      // 先进性判断，如果有从地址管理里选择后跳转过来时携带的query
      // ，就通过query渲染数据  如果没有再渲染默认
      if (this.$route.query) {
        console.log(this.$route.query.addressId);
        let resnew = await this.$ajax.getAddressData({
          id: this.$route.query.addressId,
        });
        this.addressData = resnew[0];
      } else {
        let res = await this.$ajax.getAddressData({
          uid: this.userInfo.id,
          isDefault: true,
        });
        this.addressData = res[0];
        // console.log(this.addressData);
      }
    },
    // changeAddress(){
    // console.log(paload);
    // }
  },
  mounted() {
    this.getCheckIdData();
    this.getAddress();
  },
  computed: {
    // 获取总价
    getTotal() {
      this.checkedGoods.forEach((item) => {
        this.total += item.price * item.count;
      });
      // this.total = 0
      return this.total;
    },
  },
};
</script>

<style lang="scss" scoped>
.order {
  width: 100%;
  // height: 100%;
  // padding-bottom: 50px;
  background: #eee;
  .address {
    color: black;
    .atitle {
      i {
        font-style: normal;
      }
      .default {
        display: inline-block;
        border: 1px solid #ff80aa;
        font-size: 12px;
        color: #b6b6b6;
        padding: 0 2px;
        height: 20px;
        line-height: 20px;
      }
    }
  }
  .goodInfo {
    ::v-deep .van-card {
      background: #fff;
      margin: 8px 0;
    }
  }
  .footer {
    display: flex;
    justify-content: space-between;
    width: 100%;
    position: fixed;
    bottom: 0;
    height: 60px;
    font-size: 14px;
    ::v-deep .van-cell__title {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .shouldPay {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .custom-title {
      color: #ff80aa;
      font-size: 14px;
      margin-right: 10px;
      i {
        font-style: normal;
      }
    }
    .submit {
      flex: 1;
      display: flex;
      justify-content: flex-end;
      span {
        display: flex;
        // text-align: center;
        justify-content: center;
        align-items: center;
        color: #fff;
        width: 80px;
        height: 38px;
        background: #ff80aa;
        border-radius: 20px;
        i {
          font-style: normal;
          font-size: 14px;
        }
      }
    }
  }
}
</style>